<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <form action="" method="post" enctype="application/x-www-form-urlencoded"></form> -->
    <h1>先添加数据在获取数据</h1>
    <button class="btn2">添加用户到数据库</button>
    <script>
      /*
            发送post请求 ，在原生ajax里 找到 post和 get的区别
            1.method   2.参数传递 ：get 是地址栏 传参 。post 通过send发送请求体传参
            3.post 需要设置 请求头部

        */

      class Jq {
        ajax(options) {
          let {
            url = "",
            method = "get",
            data = {},
            dataType = "json",
            success = function () {},
          } = options; // 获取options里的配置,设置默认参数
          let str = this.#o2s(data);
          if (method === "get") {
            // 是发送get的时候需要 拼接到地址栏上。
            url = url + "?" + str;
          }
          let xhr = new XMLHttpRequest();
          xhr.open(method, url);

          if (method == "get") {
            xhr.send();
          } else {
            // 设置post的请求头部信息
            xhr.setRequestHeader(
              "Content-Type",
              "application/x-www-form-urlencoded"
            );
            // 发送post参数
            xhr.send(str);
          }
          xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
              if (dataType == "text") {
                success(xhr.responseText); // 调用success函数
              } else {
                success(JSON.parse(xhr.responseText));
              }
            }
          };
        }
        post(url, data, cb, type = "json") {
          // 别名
          this.ajax({
            url,
            method: "post",
            data,
            dataType: type,
            success: cb,
          });
        }
        #o2s(obj) {
          let keys = Object.keys(obj); // keys = ['myname','age'];
          let values = Object.values(obj); // values = ['zhangsan',20];
          let arr = keys.map((key, k) => {
            return `${key}=${values[k]}`;
          });
          return arr.join("&");
        }
      }

      let $ = new Jq();

      // 发送ajax请求，先添加数据，添加完成之后，在获取最新的数据
      document.querySelector(".btn2").onclick = function () {
        $.ajax({
          method: "get",
          url: "./adduser",
          data: {
            name: "张三222",
            age: 20,
            gender: "男",
          },
          success(res) {
            // 添加成分之后 在获取最新数据
            console.log(res);
            $.ajax({
              method: "get",
              url: "./getusers",

              success(res) {
                console.log(res);
              },
            });
          },
        });
      };
    </script>
  </body>
</html>
